<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.d1{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				text-align: center;
				line-height: 200px;
				border: 50px solid #93db50;
				padding: 50px;
				margin: 0 auto;
			}
			.d2{
				width: 500px;
				height: 500px;
				border: 20px solid bisque;
				padding: 10px;
				background-color: rgb(154, 190, 223);
				/* position: relative; */
			}
		
		</style>
	</head>
	<body>
		<div class="d2">
			<div class="d1">helloworld</div>
			</div>
			<script type="text/javascript">
				var d1 = document.querySelector(".d1");
				console.log(d1.offsetWidth);
				console.log(d1.offsetHeight);
				//元素的外边距+已定位父元素的padding,body算边框，别的元素不算
				console.log(d1.offsetLeft);
				console.log(d1.offsetTop);

				console.log([d1.offsetParent]);
			</script>
	</body>
</html>